<template>
  <view class="alldiv">
    <view class="navdiv">
      <u-navbar
        back-text="返回"
        @leftClick="navigateBack"
        :leftText="language.Ltinerarydetails.navtitle"
      ></u-navbar>
    </view>
    <view style="mapdiv">
      <map
        style="width: 100%; height: 400px; position: absolute"
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
      >
      </map>
    </view>
    <view class="litndiv">
      <!-- 这个是头部区域 -->
      <view class="headdiv">
        <span
          >{{ language.Ltinerarydetails.yzf }}12.30{{
            language.Ltinerarydetails.tz
          }}</span
        >
      </view>
      <!-- 这个详情标题 -->
      <view class="headdivtitle">
        <span>{{ language.Ltinerarydetails.xq }}</span>
      </view>
      <!-- 这个是功能列表区域 -->
      <view class="Functionsdiv">
        <!-- 这个是描述 -->
        <view class="describediv">
          <span style="color: rgba(153, 153, 153, 1)">2014-03-11 19:21:57</span>
        </view>
        <view class="describediv">
          <span style="color: rgba(153, 153, 153, 1)"
            >{{ language.Ltinerarydetails.ddc }}M30
            {{ language.Ltinerarydetails.namber }}****0815</span
          >
        </view>
        <view class="describedivcc">
          <span style="color: rgba(153, 153, 153, 1)"
            >{{ language.Ltinerarydetails.qxfy }}（48{{
              language.Ltinerarydetails.mm
            }}11{{ language.Ltinerarydetails.ss }}）</span
          >
          <span style="color: rgba(56, 56, 56, 1)"
            >12.3{{ language.Ltinerarydetails.tz }}</span
          >
        </view>
        <view class="functionlistdiv">
          <view class="aa">
            <image
              style="width: 18px; height: 18px"
              src="../../../static/image/frequently.png"
              mode="scaleToFill"
            />
            <span style="margin-left: 10px">{{
              language.Ltinerarydetails.funone
            }}</span>
          </view>
          <view class="aa">
            <image
              style="width: 18px; height: 18px"
              src="../../../static/image/tool.png"
              mode="scaleToFill"
            />
            <span style="margin-left: 10px">{{
              language.Ltinerarydetails.funtwo
            }}</span>
          </view>
          <view class="aa">
            <image
              style="width: 18px; height: 18px"
              src="../../../static/image/opinion.png"
              mode="scaleToFill"
            />
            <span style="margin-left: 10px">{{
              language.Ltinerarydetails.funthree
            }}</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
        
  <script>
export default {
  data() {
    return {
      language: {},
      latitude: 39.909,
			longitude: 116.39742,
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
    },
    // 返回上一个页面
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
  },
};
</script>
    
    

<style lang="less" scoped>
.alldiv {
  width: 100vw;
  height: 100vh;
  //   这个是返回
  .navdiv {
    width: 100%;
    height: 10%;
    overflow: hidden;
    z-index: 999999;
    margin-bottom: 10px;
  }
  .mapdiv {
    width: 100%;
    height: 50%;
  }
  .litndiv {
    width: 100%;
    height: 40%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    // 头部区域样式
    .headdiv {
      width: 95%;
      height: 20%;
      color: rgba(56, 56, 56, 1);
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    // 详情标题样式
    .headdivtitle {
      width: 95%;
      height: 10%;
      color: rgba(102, 102, 102, 1);
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    //功能列表样式
    .Functionsdiv {
      width: 95%;
      height: 55%;
      left: 16px;
      border-radius: 16px;
      background: rgba(250, 251, 253, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      //   这个是描述
      .describediv {
        width: 95%;
        height: 15%;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
      .describedivcc {
        width: 95%;
        height: 15%;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      //   功能列表区域
      .functionlistdiv {
        width: 95%;
        height: 55%;
        display: flex;
        .aa {
          width: 33.33%;
          height: 100%;
          font-size: 12px;
          color: rgba(153, 153, 153, 1);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>